<template>
  <div>
    <!-- 用户聊天室 -->
    <el-card class="chat_room">
      <div slot="header" class="clearfix">
        <span>聊天室({{ getUserLength }})</span>
      </div>
      <div class="text-item-container">
        <!-- 聊天记录框 -->
        <div class="text_item">
          <div v-for="(item,index) in rootTextAll" ref="sendInfo" :key="index" class="user_item_info">
            <!-- 其他人聊天记录 -->
            <div v-if="item.nickname !== nickname" class="other_user all_user">
              <el-avatar class="other_profile all_profile" :src="item.profile" />
              <div class="other_info all_user_info">
                <div class="other_name">{{ item.nickname }}</div>
                <!-- 发送的是文本 -->
                <div v-if="item.isText" class="other_text all_text">
                  <span>{{ item.info }}</span>
                  <span class="triangle all_triangle" />
                </div>
                <!-- 发送的是图片 -->
                <div v-else class="other_text all_text">
                  <img class="all_img" :src="item.info" alt="">
                  <span class="triangle all_triangle" />
                </div>
              </div>
            </div>
            <!-- 自己发的聊天记录 -->
            <div v-else class="current_user all_user">
              <el-avatar class="current_profile all_profile" :src="item.profile" />
              <div class="current_info all_user_info">
                <div class="current_name">{{ item.nickname }}</div>
                <!-- 发送的是文本 -->
                <div v-if="item.isText" class="current_text all_text">
                  <span>{{ item.info }}</span>
                  <span class="triangle all_triangle" />
                </div>
                <!-- 发送的是图片 -->
                <div v-else class="current_text all_text">
                  <img class="all_img" :src="item.info" alt="">
                  <span class="triangle all_triangle" />
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

    </el-card>
    <!-- 输入框 -->
    <div class="input_container">
      <!-- 表情包容器 -->
      <div class="icon_container">
        <!-- 表情包 -->
        <span class="icon_svg" @click="showEmoji = !showEmoji"><svg t="1627786671055" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4662" width="16" height="16"><path d="M249.6 367.2c0 36 29.6 65.6 65.6 65.6s65.6-29.6 65.6-65.6-29.6-65.6-65.6-65.6-65.6 29.6-65.6 65.6zM512 790.4c214.4 0 259.2-194.4 259.2-194.4H252.8S297.6 790.4 512 790.4z" fill="#1296db" p-id="4663" /><path d="M512 1010.4c-274.4 0-497.6-224-497.6-498.4S237.6 14.4 512 14.4s498.4 223.2 498.4 498.4-224 497.6-498.4 497.6zM512 68C267.2 68 68 267.2 68 512s199.2 444 444 444 444-199.2 444-444S756.8 68 512 68z" fill="#1296db" p-id="4664" /><path d="M643.2 367.2c0 36 29.6 65.6 65.6 65.6 36 0 65.6-29.6 65.6-65.6s-29.6-65.6-65.6-65.6c-36 0-65.6 29.6-65.6 65.6z" fill="#1296db" p-id="4665" /></svg></span>
        <!-- 上传图片 -->
        <span class="icon_svg">
          <svg t="1627786648840" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4513" width="16" height="16"><path d="M920.159042 1022.356695H102.596216A102.197653 102.197653 0 0 1 0.398563 920.159042V102.596216A102.197653 102.197653 0 0 1 102.596216 0.398563h817.562826a102.197653 102.197653 0 0 1 102.197653 102.197653v817.562826a102.197653 102.197653 0 0 1-102.197653 102.197653z" fill="#5874CF" p-id="4514" /><path d="M102.596216 945.709988h817.562826a25.550946 25.550946 0 0 0 25.550946-25.550946v-254.111425L811.627305 530.640479a63.586108 63.586108 0 0 0-90.338874 0l-228.689245 230.884407a63.874299 63.874299 0 0 1-91.031761 0l-88.174371-89.008287a63.537054 63.537054 0 0 0-90.332743 0l-146.015042 147.437605v100.204838a25.550946 25.550946 0 0 0 25.550947 25.550946z" fill="#839EF8" p-id="4515" /><path d="M920.159042 77.045269H102.596216a25.550946 25.550946 0 0 0-25.550947 25.550947v608.059784l91.822755-92.687329a139.521533 139.521533 0 0 1 198.717317 0l79.485701 80.221509 220.006707-222.091497a139.754539 139.754539 0 0 1 198.741844 0l79.890395 80.552622v-454.055089a25.550946 25.550946 0 0 0-25.550946-25.550947z" fill="#839EF8" p-id="4516" /><path d="M204.787737 281.434443c0 42.333509 34.319329 76.646707 76.646706 76.646707 42.333509 0 76.646707-34.313198 76.646707-76.646707 0-42.327377-34.313198-76.646707-76.646707-76.646706-42.327377 0-76.646707 34.319329-76.646706 76.646706z" fill="#FFFFFF" p-id="4517" /></svg>
          <input ref="file" accept="image/*" class="upload_file" type="file" @change="uploadImg">
        </span>
        <transition name="fade">
          <Emoji v-if="showEmoji" @selectEmoji="emojiData" />
        </transition>
      </div>
      <div class="input-text-container">
        <div ref="inputData" class="input_text" contenteditable="true" @click="showEmojiFn" @keyup.enter="sendRoomText" v-html="inputData" />
      </div>
      <div class="send_btn"><el-button type="success" plain @keyup.enter="sendRoomText" @click="sendRoomText">发送</el-button></div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
import Emoji from './emoji.vue'
import { mapGetters, mapState } from 'vuex'
export default {
  components: { Emoji },
  data() {
    return {
      // 隐藏显示表情包框
      showEmoji: false,
      squareUrl: '',
      // 输入框文本信息
      inputData: '',
      // 标识发送的信息是文本还是图片
      isText: ''

    }
  },
  computed: {
    ...mapState(['rootTextAll', 'nickname']),
    ...mapGetters(['getUserLength'])

  },
  watch: {
    // 监听群聊信息变化
    rootTextAll() {
      // 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
      this.$nextTick()
        .then(() => {
          // 将新获取的群聊消息至底显示
          this.$refs.sendInfo && this.$refs.sendInfo[this.$refs.sendInfo.length - 1].scrollIntoView()
        })
    }
  },
  methods: {
    emojiData(emoji) {
      this.$refs.inputData.innerHTML = this.$refs.inputData.innerHTML + emoji.data
    },
    // 更改隐藏显示表情包
    showEmojiFn() {
      // 当表情包显示时，点击输入文字框会自动将表情包隐藏
      this.showEmoji && (this.showEmoji = false)
    },
    // 群聊上传图片
    uploadImg() {
      // 获取图片
      const file = this.$refs.file.files[0]
      // 创建文件流，转为base64
      const reader = new FileReader()
      reader.readAsDataURL(file)
      reader.onload = () => {
        this.squareUrl = reader.result
        this.sendRoomText()
      }
    },
    // 发送用户编写的文本数据
    sendRoomText() {
      // 发送的是图片
      if (this.squareUrl) {
        this.$store.dispatch('sendRoomText', { sendText: this.squareUrl, isText: false })
      } else {
        // 发送的是文本，将当前用户编辑的信息发送给服务器
        this.$refs.inputData.innerText.trim() &&
        this.$store.dispatch('sendRoomText', { sendText: this.$refs.inputData.innerText.trim(), isText: true })
      }
      // console.log(this.$refs.inputData.innerText.trim())
      // 清空输入框文本
      this.$refs.inputData.innerHTML = ''
      this.squareUrl = ''
    }
  }
}
</script>

<style scoped lang="scss" >
.chat_room{
  margin-top: 20px;
  .clearfix{
    text-align: center;
  }
  .text-item-container{
    padding: 8px 4px;
    padding-left: 4px;
    padding-bottom: 0;
    box-sizing: border-box;
    margin: auto;
    overflow: hidden;
    padding-left: 0px;
    // width: 403px;
    width: 100%;
    .text_item {
      width: 100%;
      height: 430px;
      overflow-y: scroll;
      // 隐藏滚动条
      &::-webkit-scrollbar {
        display: none;
      }
      .all_user{
        margin: 14px 0;
        display: flex;
      }
      .all_profile{
        margin-top: 10px;
        // width: 100%;
      }

      .all_user_info{
        // display: flex;
        // flex-direction: column;
        width: 55%;
      }
      .all_text{
        position: relative;
        margin-top: 10px;
        padding: 8px;
        border-radius: 4px;
        max-width: 100%;
        overflow-wrap:break-word;
        background: white;
      }

      .all_img{
        width: 80px;
        height: 80px;
      }

      .all_triangle{
          position: absolute;
          top: 8px;
          width: 0;
          height: 0;
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
      }

      .other_user{
        .other_info{
          margin-left: 8px;
          // overflow: hidden;
          .other_text{
            float: left;
            .triangle{
              left: -10px;
              border-right: 5px solid white;
              border-left: 5px solid transparent;
            }
          }
        }
      }

      .current_user{
        padding-right: 20px;
        flex-direction: row-reverse;
        .current_info{
          // display: block;
          // overflow: hidden;
          margin-right: 8px;
          .current_name{
            text-align: right;
          }
          .current_text{
            float: right;
            .triangle{
              right: -10px;
              border-left: 5px solid white;
              border-right: 5px solid transparent;
            }
          }
        }
      }
    }
  }

}
.input_container{
  padding: 8px;
  height: 155px;
  background: white;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  // 表情包定位
  .icon_container{
    position: relative;
    .icon_svg{
      margin-right: 10px;
      // 隐藏input默认样式，并定位到svg图上
      .upload_file{
        width: 20px;
        margin-left: -16px;
        opacity: 0;
      }
    }
    #emoji{
      position: absolute;
      top: -435px;
    }
  }
  .input-text-container{
    margin: auto;
    width: 100%;
    overflow: hidden;
    .input_text{
      width: 100%;
      overflow-y: scroll;
      height:80px;
      white-space:normal;
      word-break:break-all;
      word-wrap: break-word;
      &::-webkit-scrollbar {display: none;}
      &:focus-visible{
        border: none;
        outline-color: white;
      }
    }
  }

  .send_btn{
    margin: 8px 8px 8px 0;
    display: flex;
    flex-direction: row-reverse;
  }
}
.chat_room  ::v-deep .el-card__body{
  // overflow: hidden;
  background: #eee ;
  padding: 0px;
}
.fade-enter-active, .fade-leave-active {
  transition: opacity 1s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

.el-avatar--circle ::v-deep img{
  width: 100%;
}
</style>
